<template>
  <!-- 顶部详情区域 -->
  <div class="top container">
    <good-detail :data="detail"/>
  </div>

  <!-- 同类推荐区域 -->
  <div class="simi-recommend container">
    <simi-recommend :data="recGoods"
                    title="同类商品推荐"/>
  </div>

  <!-- 底部详情区域 -->
  <div class="bottom container">
    <!-- 商品详情介绍、评论 -->
    <good-detail-tabs :data="detail"/>
    <!-- 热销、榜单推荐 -->
    <div>
      <good-detail-hot :data="hot[0]"
                       title="24小时热销榜"/>
      <good-detail-hot :data="hot[1]"
                       title="周热销榜"/>
      <good-detail-hot :data="hot[2]"
                       title="总榜"/>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import {getGoodDetail, getHot, getRecommendGoods} from '@/api/good'
import GoodDetail from '@/components/library/GoodDetail.vue'
import GoodDetailHot from '@/components/library/GoodDetailHot.vue'
import GoodDetailTabs from '@/components/library/GoodDetailTabs.vue'
import SimiRecommend from '@/components/library/SimiRecommend.vue'
import {useCommonStore} from '@/stores/common'
import type {ListCategory} from '@/types/category'
import type {City} from '@/types/city'
import type {Path} from '@/types/common'
import type {Good, GoodDetail as _GoodDetail} from '@/types/good'
import {HotType} from '@/types/good'
import {storeToRefs} from 'pinia'
import {provide, ref, watch} from 'vue'
import {onBeforeRouteLeave, useRoute} from 'vue-router'

let route = useRoute()
let commonStore = useCommonStore()
let {pathList} = storeToRefs(commonStore)

let detail = ref<_GoodDetail>({})
let recGoods = ref<Good[]>([])
let hot = ref<Good[][]>([])
let address = ref<City[]>([])
let imgIndex = ref<number>(0)
let simiIndex = ref<number>(0)
let count = ref<number>(1)
let tabActiveIndex = ref<number>(0)
provide('address', address)
provide('imgIndex', imgIndex)
provide('simiIndex', simiIndex)
provide('count', count)
provide('tabActiveIndex', tabActiveIndex)

let stopWatch = watch(() => route, () => {
  address.value = []
  imgIndex.value = 0
  simiIndex.value = 0
  count.value = 1
  tabActiveIndex.value = 0
  detail.value = {}
  recGoods.value = []
  hot.value = []
  requestAll()
}, {
  immediate: true,
  deep: true
})

onBeforeRouteLeave(() => {
  stopWatch()
})

// 发起全部请求
function requestAll(): void {
  let goodId: string = <string>route.params.id
  Promise.all([
    getGoodDetail(goodId),
    getRecommendGoods(goodId),
    getHot(goodId, HotType.hour24),
    getHot(goodId, HotType.week),
    getHot(goodId, HotType.total)
  ]).then(([goodRes, recRes, hot0, hot1, hot2]): void => {
    initDetail(goodRes)
    initRecGoods(recRes)
    initHot(hot0, 0)
    initHot(hot1, 1)
    initHot(hot2, 2)
  })
}

function initDetail(res: any): void {
  detail.value = res.result
  pathList.value = [
    pathList.value[0],
    ...(detail.value.categories ?? []).map((item: ListCategory): Path => {
      let path: string = `/category${item.layer === 2 ? '/sub' : ''}/${item.id}`
      return {
        name: item.name,
        path
      }
    }).reverse(),
    {path: '', name: <string>detail.value.name}
  ]
}

function initRecGoods(res: any): void {
  recGoods.value = <Good[]>res.result
}

function initHot(res: any, index: number): void {
  hot.value[index] = <Good[]>res.result
}
</script>

<style lang="less"
       scoped>
.top {
  background-color: #fff;
}

.simi-recommend {
  margin-top: 20px;
}

.bottom {
  margin: 20px auto;
  display: flex;
}

.hit {

}
</style>